{% load static %}

{% load rbac %}

<!DOCTYPE HTML>
<html lang="zxx">

<head>
    <title>麦博创服CRM管理系统--dev</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <link rel="shortcut icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
    <link rel="apple-touch-icon" href="{% static 'favicon.ico' %}">
    <meta name="keywords" content="" />
    <!-- Meta tag Keywords -->
    <!-- css files -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
    <!-- <link rel="stylesheet" href="{% static 'plugins/style.css' %} " /> -->
    <!-- Style-CSS -->
    <link rel="stylesheet" href="css/fontawesome-all.css">
    <!-- <link rel="stylesheet" href="{% static 'plugins/fontawesome-all.min.css' %} " /> -->
    <!-- Font-Awesome-Icons-CSS -->
    <!-- //css files -->
    <!-- web-fonts -->
    <link href="http://maxcdn.bootstrapcdn.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i"
        rel="stylesheet">
    <link href="http://maxcdn.bootstrapcdn.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"
        rel="stylesheet">
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.css' %} " />
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- //web-fonts -->
    <style>
        body {
            margin: auto;
            background-color: #E4EBF8;
        }

        /* 弹窗 */
        .alert-success {
            -webkit-animation: cssAnimation 5s forwards;
            animation: cssAnimation 5s forwards;
        }

        @keyframes cssAnimation {
            0% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @-webkit-keyframes cssAnimation {
            0% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        .form-style-agile {
            border-radius: 0.8em;
            box-shadow: inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem white;
            background: none;
            outline: none;
            margin: 20px 10px;
        }

        .form-style-agile input[type="text"],
        .form-style-agile input[type="password"] {
            border: none;
            box-sizing: border-box;
            color: #333333;
            font-size: 14px;
            padding: 22px;
            height: 45px;
            line-height: 45px;
            width: 100%;
            border-radius: 0.8em;
            background: none;
            outline: none;
        }

        input[type="submit"] {
            padding: 10px;
            height: 45px;
            width: 96%;
            background: none;
            border-radius: 0.8em;
            outline: none;
            border: none;
            box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem white;
            margin: 20px 10px;
        }

        input[type="submit"]:active {
            outline: none;
            box-shadow: inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem white;
        }

        .form-style-agile input::-webkit-input-placeholder {
            color: #a3a3a3;
            font-size: 14px;
        }

        .form-style-agile input::-moz-placeholder {
            color: #a3a3a3;
            font-size: 14px;
        }

        .form-style-agile input::-ms-input-placeholder {
            color: #a3a3a3;
            font-size: 14px;
        }

        input textarea {
            color: #bcbcbc;
            padding: 20px 25px !important;
            height: 110px !important;
        }
    </style>
</head>

<body>
    <!-- bg effect -->
    <!-- //bg effect -->
    <!-- title -->
    <h1 style="margin: 166px; color: #777777;text-align: center"></h1>
    <div class="col-md-4 col-md-offset-4">
        <!-- content -->
        <div class="sub-main-w3 ">
            <font color="red">
                <span class="msg"></span>
            </font>
            <form action="#" method="post">
                {% csrf_token %}
                <h3 style="color: #aaa;text-align: center;margin-bottom: 38px">欢迎使用麦博创服CRM管理系统----测试环境
                </h3>
                <div class="form-style-agile">
                    <input placeholder="用户名" name="user" type="text" required="">
                </div>
                <div class="form-style-agile">
                    <input placeholder="密码" name="pwd" type="password" required="">
                </div>
                <div class="alert alert-success" *ngIf="message?.length > 0" role="alert">{{ msg }}</div>
                <input type="submit" value="登录">
            </form>
        </div>
    </div>

    <!-- //content -->

    <!-- Jquery -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- <script src="{% static 'js/jquery-3.3.1.min.js' %} "></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function searchCretificate(sslInsCode) {
            $.ajax({
                type: "POST",
                url: "http://dev.myboo.net.cn/login/",
                data: {
                    'web': 'crm',
                },
                error: function (data) {
                    {
                        alert("返回数据: \n" + "status:" + data.status + "\n" + "msg:" + data.msg);
                    }
                }
            });
        }
    </script>

    <!--effect js -->
    <script src="js/canva_moving_effect.js"></script>
    <!-- <script src="{% static 'js/canva_moving_effect.js' %} "></script> -->
    <!-- //effect js -->

</body>

</html>